<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_列表渲染</title>
</head>
<body>

<!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

<div id="demo">
  <p>a.b: {{a.b}}</p>
  <p>a.c: {{a.c}}</p>

  <button @click="update">更新</button>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
     a: {
       b: 123
     }
    },

    methods: {
      update () {
        // 给响应式对象直接添加一个新属性  ==> 界面不会更新 
        // this.a.c = 'abc'
        if (!this.a.hasOwnProperty('c')) {  // 如果a对象自身上没有此属性, 通过set添加
          // Vue.set(this.a, 'c', 'abc')
          this.$set(this.a, 'c', 'abc')
        } else {
          this.a.c = this.a.c + '--'
        }
        

        // 直接删除响应式对象的属性 ==> 界面不会更新 
        // delete this.a.b
        // Vue.delete(this.a, 'b')
        // this.$delete(this.a, 'b')
      }
    }
  })
</script>
</body>
</html>